<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Catalog Search</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-G7SXDJEWXV"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-G7SXDJEWXV');
    </script>
    <style>
        body {
            font-family: "Afacad Flux", sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
            color: black;
            position: relative;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        #searchWidgetTrigger {
            padding: 10px;
            width: 600px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 20px;
            cursor: pointer;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            padding-left: 40px;
        }

        .header {
            margin-bottom: 20px;
            font-size: 32px;
            font-weight: 800;
            color: inherit;
            text-align: center;
        }

        .header sub {
            font-size: 16px;
            font-weight: 600;
        }

        .search-container {
            position: relative;
        }

        .search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #aaa;
        }

        .back-to-catalog {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background-color: #ffffff;
            border: 2px solid #ccc;
            border-radius: 30px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            text-decoration: none;
            color: #000;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .back-to-catalog:hover {
            background-color: #eaeaea;
        }

        .back-to-catalog img {
            width: 30px;
            height: auto;
            margin-right: 10px;
        }

        .back-to-catalog .material-symbols-outlined {
            margin-left: 10px;
            font-size: 24px;
            vertical-align: middle;
        }

        .dark-mode {
            background-color: #333;
            color: white;
        }

        /* Toggle button styles */
        .toggle-container {
            position: absolute;
            top: 20px;
            right: 20px;
            cursor: pointer;
        }

        .toggle-button {
            padding: 10px 20px;
            background-color: #444;
            color: white;
            border-radius: 30px;
            border: none;
            font-size: 14px;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .toggle-button:hover {
            background-color: #666;
        }
    </style>
</head>

<body>

    <img src="https://i.imgur.com/FYPcTFF.png" alt="Awesome GEE Community Catalog"
        style="width: 400px; height: auto; margin-bottom: 20px;">

    <div class="header">
        Awesome GEE Community Catalog Search <sub>Beta</sub>
    </div>

    <!-- Light/Dark mode toggle -->
    <div class="toggle-container">
        <button id="modeToggle" class="toggle-button">Switch to Dark Mode</button>
    </div>

    <script src="https://cloud.google.com/ai/gen-app-builder/client?hl=en_GB"></script>

    <gen-search-widget configId="7df2e903-867d-4e8e-b3da-bc5f138b359b"
        triggerId="searchWidgetTrigger"></gen-search-widget>

    <div class="search-container">
        <span class="material-symbols-outlined search-icon">search</span>
        <input type="text" placeholder="Search here" id="searchWidgetTrigger" />
    </div>

    <!-- Back to Catalog Button -->
    <a href="https://gee-community-catalog.org/browse" class="back-to-catalog">
        <img src="https://i.imgur.com/GRBvdQf.jpeg" alt="Catalog Logo">
        Explore the Catalog Browser
        <span class="material-symbols-outlined">arrow_forward</span>
    </a>

    <script>
        const questions = [
            "Tell me about the ESRI Land cover dataset",
            "What population datasets are available in the community catalog?",
            "Tell me about datasets related to crop phenology",
            "Are there any datasets related to soil conditions?",
            "Give me a list of all tree canopy datasets",
            "What population datasets can I explore in the catalog?",
            "Give me the citation for the FABDEM dataset?",
            "Tell me about the Mangrove extent datasets in the catalog"
        ];

        function getRandomQuestion() {
            const randomIndex = Math.floor(Math.random() * questions.length);
            return questions[randomIndex];
        }

        document.getElementById('searchWidgetTrigger').value = getRandomQuestion();

        document.getElementById('searchWidgetTrigger').addEventListener('click', function () {
            const widget = document.querySelector('gen-search-widget');
            widget.open();
        });

        // Dark mode toggle script
        const toggleButton = document.getElementById('modeToggle');
        const bodyElement = document.body;

        toggleButton.addEventListener('click', function () {
            bodyElement.classList.toggle('dark-mode');
            if (bodyElement.classList.contains('dark-mode')) {
                toggleButton.textContent = 'Switch to Light Mode';
            } else {
                toggleButton.textContent = 'Switch to Dark Mode';
            }
        });
    </script>

</body>

</html>
